<template>
    <div>
        <t-header></t-header>
        <div class="shoucang-dt">
            <div class="w">
                <div class="dt-title">
                    收藏 <span>{{imgList.length}}</span>
                </div>
            </div>
        </div>

        <div class="shoucang-dd">
            <div class="w">
                <div v-if="imgList.length == 0" class="dd-tips">您还没有收藏哦</div>
                <div class="dd-list" v-if="imgList.length > 0">
                    <img 
                    :key="index"
                    v-for="(item, index) in imgList"
                    v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.pathName}`">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../components/global/Header';
import axios from 'axios';
import { onMounted, ref } from '@vue/composition-api';
export default {
    components: {
        't-header': Header
    },
    beforeRouteEnter (to, from, next) {
        // 没有登录进行拦截
        if (!window.localStorage.getItem('token')) {
            let that = this;
            Message.error('您还没有登录，不能使用该功能');
            setTimeout(() => {
                next('/home');
            }, 2000);
        } else {
            next();
        }
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getImgList();
        })

        // 收藏的图片列表
        const imgList = ref('');
        // 获取收藏列表
        const getImgList = async function () {
            // 获取用户信息
            let { data: theuser } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (theuser.status != 200)
                return context.parent.$message.error('获取用户信息失败，请重新登录');
            let { data: res } = await axios.get(`/user/shoucang/img/${theuser.user.email}`);
            if (res.status != 200)
                return context.parent.$message.error('获取收藏信息失败，请尝试重新登录');
            imgList.value = res.list;
        }


        return {
            imgList
        }
    }
}
</script>

<style lang="less" scoped>
.shoucang-dt {
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 6px 10px #ccc;
    font-size: 18px;
    color: #606060;
    font-weight: 700;
}

.shoucang-dd {
    padding-top: 40px;
    .dd-tips {
        text-align: center;
        font-size: 26px;
        color: #b5b5b9;
        font-weight: 700;
    }
    .dd-list {
        columns: auto 4;
        column-gap: 10px;
        img {
            width: 100%;
        }
    }
}
</style>